import { useState } from 'react';
import { FileText, Image, Plus, Settings } from 'lucide-react';

interface FileItem {
  id: number;
  name: string;
  type: 'image' | 'pdf';
  size: string;
  date: string;
}

interface SidebarProps {
  files: FileItem[];
  selectedFile: number | null;
  onFileSelect: (fileId: number) => void;
  onAddFile: () => void;
}

export default function Sidebar({ files, selectedFile, onFileSelect, onAddFile }: SidebarProps) {
  const [activeTab, setActiveTab] = useState('recent');

  return (
    <div className="w-64 border-r border-gray-200 bg-white flex-shrink-0 flex flex-col h-full">
      <div className="p-4 border-b border-gray-200">
        <button 
          className="w-full flex items-center justify-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"
          onClick={onAddFile}
        >
          <Plus className="w-4 h-4" />
          <span>添加文件</span>
        </button>
      </div>
      
      <div className="border-b border-gray-200">
        <div className="flex">
          <button 
            className={`flex-1 py-3 text-sm font-medium ${activeTab === 'recent' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`}
            onClick={() => setActiveTab('recent')}
          >
            最近文件
          </button>
        </div>
      </div>
      
      <div className="flex-1 overflow-y-auto p-3">
        <div className="space-y-1">
          {files.length > 0 ? (
            files.map(file => (
              <div 
                key={file.id}
                className={`flex items-center p-2 rounded-lg cursor-pointer ${selectedFile === file.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-100 text-gray-700'}`}
                onClick={() => onFileSelect(file.id)}
              >
                {file.type === 'pdf' ? (
                  <FileText className="w-5 h-5 mr-3 flex-shrink-0" />
                ) : (
                  <Image className="w-5 h-5 mr-3 flex-shrink-0" />
                )}
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium truncate">{file.name}</p>
                  <p className="text-xs text-gray-500">{file.size} · {file.date}</p>
                </div>
              </div>
            ))
          ) : (
            <div className="text-center py-8 text-gray-500 text-sm">
              暂无文件，请添加新文件
            </div>
          )}
        </div>
      </div>
      
      <div className="p-3 border-t border-gray-200">
        <button className="w-full flex items-center justify-center py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
          <Settings className="w-4 h-4 mr-2" />
          设置
        </button>
      </div>
    </div>
  );
}
